<template>
  <div class="flex between~">
    <div class="flex-none text-xs px-5px border border-gray-200 rounded mr-5px box-border h-38px center~">
      {{ prefix }}
    </div>
    <v-datepicker v-model="picked" range class="flex-1" @closed="onClose" format="yyyy/MM/dd"/>
  </div>
</template>

<script setup lang="ts">
import {ref, toRefs} from "vue";
import VDatepicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css'
import {parseTimestamp} from "@/util";

interface Props {
  prefix: string
}

const emits = defineEmits(["update:modelValue"])
const picked = ref<Date[]>([])
const rawProps = defineProps<Props>()
const {prefix} = toRefs(rawProps)

function onClose() {
  if (!picked.value || picked.value.length !== 2) {
    const startDate = new Date()
    const endDate = new Date(new Date().setDate(startDate.getDate() + 7))
    picked.value = [startDate, endDate]
  }

  const start = parseTimestamp(picked.value[0])
  const end = parseTimestamp(picked.value[1])
  emits("update:modelValue", [start, end])
}
</script>

<style scoped>

</style>